<template>
    <div>
        <div class="title_wrap">
            <h2>{{this.$route.query.keyword}}</h2>
            <span>找到{{this.count}}个结果</span>
        </div>
        <div class="tab_wrap">
            <el-tabs v-model="activeName">
                <el-tab-pane label="歌曲" name="songs">
                    <table class="el-table">
                        <thead>
                        <th width="5%"></th>
                        <th width="30%">音乐标题</th>
                        <th width="20%">歌手</th>
                        <th width="35%">专辑</th>
                        <th width="10%">时长</th>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in songList" :key="index" class="el-table--enable-row-hover"
                            @dblclick="playMusic(item.id)">
                            <td>{{index+1}}</td>
                            <td>
                                <div>
                                    <span>{{item.name}}</span>
                                    <span class="el-icon-video-play" v-if="item.mvid!=0"></span>
                                </div>
                                <div>
                                    <p v-if="item.alias.length!=0">{{item.alias[0]}}</p>
                                </div>
                            </td>
                            <td><span>{{item.artists[0].name}}</span></td>
                            <td><span>{{item.album.name}}</span></td>
                            <td><span>{{item.duration}}</span></td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="歌单" name="playLists" class="playLists">
                    <div class="items">
                        <div class="item" v-for="(item,index) in playList" :key="index" @click="toPlayList(item.id)">
                            <div class="img_wrap">
                                <span class="copywriter">播放量:{{item.playCount}}</span>
                                <img :src="item.coverImgUrl" alt="">
                                <span class="el-icon-video-play play-but" ></span>
                            </div>
                            <div class="info_wrap">
                                <p>{{item.name}}</p>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="MV"  name="mvs" class="mvs">
                    <div class="items">
                        <div class="item" v-for="(item,index) in mvs" :key="index">
                            <div class="img_wrap" @click="toMv(item.id)">
                                <img :src="item.cover" alt="">
                                <span class="play_count"><i class="el-icon-caret-right"></i>{{item.playCount}}</span>
                            </div>
                            <div class="info_wrap">
                                <p>{{item.name}}</p>
                                <p class="song_artist">{{item.artistName}}</p>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="page_card">
            <el-pagination
                    @current-change="currentPage"
                    layout="prev, pager, next"
                    :current-page="page"
                    :page-size="20"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "result",
        data(){
            return{
                //标签名
                activeName:'songs',
                songList:[],
                count:0,
                playList:[],
                mvs:[],
                page:1,
                total:0,
            }
        },
        watch:{
            activeName(){
                if(this.activeName=='songs')
                {
                    this.getSongs();
                    this.page=1;
                }
                if(this.activeName=='playLists')
                {
                    this.getLists();
                    this.page=1;
                }
                if(this.activeName=='mvs')
                {
                    this.getMvs();
                    this.page=1;
                }
            },
            /*因为vue的路由传参传到当前的页面是不会刷新的，所以需要监听路由的变化，
            变化后再执行一次获取各数据的函数即可。
             */
            $route(){
                if(this.activeName=='songs')
                {
                    this.getSongs();
                    this.page=1;
                }
                if(this.activeName=='playLists')
                {
                    this.getLists();
                    this.page=1;
                }
                if(this.activeName=='mvs')
                {
                    this.getMvs();
                    this.page=1;
                }

            },
        },
        //生命周期钩子 created
        //回调函数，添加之后自动执行
        //内部可以通过this访问vue实例
        created() {
            console.log(this.$route);
            if(this.activeName=='songs')
            {
                this.getSongs();
                this.page=1;
            }
            if(this.activeName=='playLists')
            {
                this.getLists();
                this.page=1;
            }
            if(this.activeName=='mvs')
            {
                this.getMvs();
                this.page=1;
            }

        },
        methods:{
            getSongs(){
                axios({
                    url:'https://autumnfish.cn/search',
                    method:'get',
                    params:{
                        keywords:this.$route.query.keyword,
                        limit:20,
                        offset:(this.page-1)*20,
                        type:1,
                    }
                }).then(response=>{
                    //console.log(response);
                    this.songList=response.data.result.songs;
                    this.count=response.data.result.songCount;
                    this.total=this.count;
                    for(let i=0;i<this.songList.length;i++)
                    {   //将获取到的毫秒转化为分+秒
                        let duration=this.songList[i].duration;
                        let min=parseInt(duration/1000/60);
                        let second=parseInt(duration/1000%60);
                        if(min<10)
                            min='0'+min;
                        if(second<10)
                            second='0'+second;
                        this.songList[i].duration=`${min}:${second}`;
                    }
                })
            },
            getLists(){
                axios({
                    url:'https://autumnfish.cn/search',
                    method:'get',
                    params:{
                        keywords:this.$route.query.keyword,
                        limit:20,
                        offset:(this.page-1)*20,
                        type:1000,
                    }
                }).then(response=>{
                    //console.log(response);
                    this.playList=response.data.result.playlists;
                    this.count=response.data.result.playlistCount;
                    this.total=this.count;

                })
            },
            getMvs(){
                axios({
                    url:'https://autumnfish.cn/search',
                    method:'get',
                    params:{
                        keywords:this.$route.query.keyword,
                        limit:20,
                        offset:(this.page-1)*20,
                        type:1004,
                    }
                }).then(response=>{
                    //console.log(response);
                    this.mvs=response.data.result.mvs;
                    this.count=response.data.result.mvCount;
                    this.total=this.count;
                })
            },

            playMusic(id){
                axios({
                    url:'https://autumnfish.cn/song/url',
                    method:'get',
                    params:{
                        id:id,
                    }
                }).then(response=>{
                    //console.log(response);
                    this.$parent.musicUrl=response.data.data[0].url;
                })
            },
            currentPage(tPage){
                this.page=tPage;
                if(this.activeName=='songs')
                {
                    this.getSongs();
                }
                if(this.activeName=='playLists')
                {
                    this.getLists();
                }
                if(this.activeName=='mvs')
                {
                    this.getMvs();
                }
            },
            toPlayList(id){
                //传参数到PlayList
                this.$router.push(`/PlayList?id=${id}`);
            },
            toMv(id){
                //传参数到MV
                this.$router.push(`/MV?id=${id}`);
            },
        },
    }
</script>

<style scoped>
    img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .title_wrap{
        position: relative;
        width: 90%;
        left: 5%;
        top:5px;
    }
    .tab_wrap{
        position: relative;
        width: 90%;
        left: 5%;
    }
    .items .img_wrap{
        position: relative;
        width: 200px;
        height: 200px;
    }
    .playLists .items{
        display: flex;
        flex-wrap:wrap;
    }
    .playLists .item{
        position: relative;
        width: 210px;
        margin: 10px;
        overflow: hidden;
        cursor: pointer;
    }
    .playLists .copywriter{
        position: absolute;
        width: 200px;
        top:-50px;
    }
    .playLists .img_wrap:hover .copywriter{
        position: absolute;
        width: 200px;
        top:0;
        color: white;
        background-color: black;
        opacity: 0.8;
    }
    .playLists .play-but{
        display: block;
        position: absolute;
        width: 50px;
        height: 50px;
        bottom: -200px;
        right: 0;
        font-size:50px;
        color: sandybrown;
    }
    .playLists .img_wrap:hover .play-but{
        display: block;
        position: absolute;
        width: 50px;
        height: 50px;
        bottom: 0;
        right: 0;
        font-size:50px;
        color: sandybrown;
        cursor:pointer;
    }
    .mvs .items{
        display: flex;
        flex-wrap: wrap;
    }
    .mvs .item{
        width: 22%;
        margin: 10px;

    }
    .mvs .img_wrap{
        position: relative;
        width: 250px;
        height: 150px;
        cursor: pointer;
    }
    .mvs .info_wrap{
        text-align: center;
    }
    .mvs .play_count{
        background-image: linear-gradient(to right,rgba(255,0,0,0),rgba(58,58,10,1));
        position: absolute;
        right: 0;
        color: white;
    }
    .song_artist{
        color: grey;
        font-size:15px;
        margin-top: 5px;
    }
    .page_card{
        width: 90%;
        position: relative;
        left: 5%;
        text-align: center;
    }



</style>